<template>
  <view class="goods-detail">
    <!-- 商品标题 -->
    <view class="goods-header">
      <text class="goods-title">{{goodsDetail.name}}</text>
      <view class="goods-tag">
        <text>{{goodsDetail.city}}</text>
        <text>{{goodsDetail.price}}元</text>
      </view>
    </view>
    
    <!-- 商品图片 -->
    <image :src="goodsDetail.image" mode="widthFix" class="goods-image"></image>
    
    <!-- 商品描述 -->
    <view class="goods-desc">
      <text>{{goodsDetail.description}}</text>
    </view>
    
    <!-- 其他信息 -->
    <view class="goods-info" v-if="goodsDetail.cond">
      <text>成色: {{goodsDetail.cond}}</text>
    </view>
    <view class="goods-info" v-if="goodsDetail.year">
      <text>年份: {{goodsDetail.year}}</text>
    </view>
    
    <!-- 联系方式 -->
    <view class="goods-contact">
      <text>联系方式: {{goodsDetail.contact_phone}}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      goodsDetail: {}
    }
  },
  onLoad(options) {
    const goodsId = options.id; 
    if (!goodsId) {
      uni.showToast({ title: '商品ID缺失', icon: 'none' });
      uni.navigateBack();
      return;
    }
    this.loadGoodsDetail(goodsId);
  },
  methods: {
    loadGoodsDetail(id) {
     
      const cachedDetail = uni.getStorageSync('currentProduct');
      if (cachedDetail && cachedDetail.id == id) {
        this.goodsDetail = cachedDetail;
        return;
      }
    
      uni.showLoading({ title: '加载中...' });
      this.getProductDetail(id)
        .then(detail => {
          this.goodsDetail = detail;
        })
        .catch((res) => {
        	console.log(res);
        	return Promise.reject(false);
        });
    },
       
       
        getProductDetail(id) {
          this.token = uni.getStorageSync('token');
          return this.$http.get(`https://billiards.cqtrust.cn/local_trades/${id}`)
            .then((res) => {
              const { code, msg, data } = res;
              if (code === 1 || code === 200) {
                return Promise.resolve(data);
              }
              return Promise.reject(new Error(msg || '获取商品详情失败'));
            })
            .catch((res) => {
              console.log(res);
              return Promise.reject(false);
            });
        }
    }
	
}
</script>

<style>
.goods-detail {
  padding: 20rpx;
  background-color: #ffffff;
}

.goods-tag text {
  margin-left: 10rpx;
  font-size: 24rpx;
  color: #ffaa00;
}

.goods-image {
  width: 100%;
  margin-bottom: 20rpx;
  border-radius: 8rpx;
}

.goods-contact {
  font-size: 28rpx;
  color: #333;
  margin-top: 30rpx;
  padding: 20rpx;
  background-color: #fff8e6;
  border-radius: 8rpx;
  border-left: 4rpx solid #ffaa00;
}

.goods-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.goods-title {
  font-size: 36rpx;
  font-weight: bold;
}



.goods-desc {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 20rpx;
}

.goods-info {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.goods-contact {
  font-size: 28rpx;
  color: #333;
  margin-top: 30rpx;
}
</style>